define(["jquery","template"], ($,template) => {
    class Header {
        constructor() {
            this.init()
            this.header = ''
        }
        init() {
            $("header").load("/html/modules/header.html", (e) => {
                this.header = $('header')
                //鼠标划过标题标题变红
                $("#head-abc a").each(function(){
                    $(this).hover(() => {
                        $(this).css({ color: 'red' })
                    }, () => {
                        $(this).css({ color: "black" })
                    })
                }) 
                $(".head-first a").each(function () {
                    $(this).hover(() => {
                        $(this).css({color:"white"})
                    }, () => {
                        $(this).css({color:"#ccc"})
                    })
                })
                //鼠标划过标题显示下拉菜单(智能翻译)
                $(".header-pull").on("mouseenter",(e) =>{
                    $(".header-down-pull").css({display:"block"})
                    $(".header-down-pull").on("mouseleave",(e) =>{
                        $(".header-down-pull").css({display:"none"})  
                    })
                })
                $(".header-pull").on("mouseleave",() => {
                    $(".header-down-pull").css({display:"none"})
                })
                $(".header-down-pull").on("mouseenter",(e) =>{
                    $(".header-down-pull").css({display:"block"})
                    
                })
                //鼠标划过标题显示第二个下拉菜单（糖猫手表）
                $(".header-pull-second").on("mouseenter",(e) =>{
                    $(".header-down-pull-second").css({display:"block"})
                    $(".header-down-pull-second").on("mouseleave",(e) =>{
                        $(".header-down-pull-second").css({display:"none"})  
                    })
                })
                $(".header-pull-second").on("mouseleave",() => {
                    $(".header-down-pull-second").css({display:"none"})
                })
                $(".header-down-pull-second").on("mouseenter",(e) =>{
                    $(".header-down-pull-second").css({display:"block"})
                    
                })
                //鼠标划过标题显示三个下拉菜单（配件）
                $(".header-pull-third").on("mouseenter",(e) =>{
                    $(".header-down-pull-third").css({display:"block"})
                    $(".header-down-pull-third").on("mouseleave",(e) =>{
                        $(".header-down-pull-third").css({display:"none"})  
                    })
                })
                $(".header-pull-third").on("mouseleave",() => {
                    $(".header-down-pull-third").css({display:"none"})
                })
                $(".header-down-pull-third").on("mouseenter",(e) =>{
                    $(".header-down-pull-third").css({display:"block"})
                    
                })
                //下拉菜单的模板
                this.product();
                this.productB();
                this.productC();
                this.headerCart();//购物车车数据
            })
          
        }
        product () {
            $.get("/libs/json/productPull.json",(resp) => {
                this.renderProductPull(resp);
            })
        }
        renderProductPull (resp) {
            var html = template("productTemplatePull",{list:resp})
            $(".header-down-pull").html(html)
        }
        productB () {
            $.get("/libs/json/productPullSecond.json",(resp) => {
                this.renderProductPullB(resp);
            })
        }
        renderProductPullB (resp) {
            var htmlB = template("productTemplatePullB",{list:resp})
            $(".header-down-pull-second").html(htmlB)
        }
        productC () {
            $.get("/libs/json/productPullThird.json",(resp) => {
                this.renderProductPullC(resp);
            })
        }
        renderProductPullC (resp){
            var html = template("productTemplatePullC",{list:resp})
            $(".header-down-pull-third").html(html) 
        }
       headerCart () {
           let count = 0
           let cart = localStorage.getItem("cart")
           if(cart) {
               cart = JSON.parse(cart)
               count = cart.reduce((total,shop) => {
                total+= +shop.count
                return total
               },0)
           } 
           $(".headerCart").html(count)
           $("#cart span").html(count)
       }
        
    }
    return new Header()

})
